<template>
  <div id="app">
    <el-container style="height: 100%;">
      <!-- <el-header style="display: flex;">
        <div v-for="(item, index) in menuList" :key="index">
          <router-link :to="item.path">{{ item.name }}</router-link>
        </div>
      </el-header> -->
      <el-header>
        <el-menu :default-active="activeIndex" mode="horizontal" :router="true" :active-text-color="activecolor" background-color="#B3C0D1" @select="handleSelect">
          <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.path">
            {{ item.name }}
            <!-- <router-link :to="item.path">{{ item.name }}</router-link> -->
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-container style="height:100%;">
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuList: [],
      menuList1:[],
      activecolor:'#2c3e50',
      activeIndex:'',
    }
  },
  created() {
    var thet = this;
    thet.menuList = thet.$router.options.routes
    thet.menuList1 = thet.menuList[0].children;
    console.log(thet.menuList);
    thet.activeIndex = sessionStorage.getItem('ActiveIndex');
    if(thet.activeIndex=='' || thet.activeIndex==null){
      thet.activeIndex = thet.menuList[0].path
    }
  },
  methods:{
    handleSelect(key, keyPath){
      sessionStorage.setItem('ActiveIndex',key)
    },
    to(item){
      this.menuList1 = item.children;
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;

  .el-header,
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    // background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: calc(100% - 60px)
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    padding: 0;
    width: 100%;
    height: 100%;
    // line-height: 160px;
    // height: 740px;
    box-sizing: border-box;
  }

  body>.el-container {
    margin-bottom: 40px;
    height: 100%;
  }
}

a {
  font-weight: bold;
  color: #2c3e50;

  &.router-link-exact-active {
    color: #42b983;
  }
}

nav {
  // padding: 30px;
  height: 60px;
  // line-height: 60px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
